<template>
    <div>
        <el-input 
            placeholder="请输入搜索内容" 
            v-model="searchInfo" 
            @keyup.enter="searchClick" 
        />
        <div id="container"></div>
        <div id="r-result"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo: '',
            rivers: [
                {
                    name: "富春江",
                    latitude: 29.71209866552553,
                    longitude: 119.65768949711173,
                    description: "富春江是浙江省的一条风景如画的河流。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "西湖",
                    latitude: 30.220671,
                    longitude: 120.108478,
                    description: "州西湖风景名胜区位于浙江省杭州市中心，秀丽的湖光山色和众多的名胜古迹闻名中外，是中国著名的旅游胜地，也被誉为人间天堂",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "桐庐富春江",
                    latitude:29.72860726580854,
                    longitude: 119.6509529897088,
                    description: "桐庐富春江有着丰富的历史和美丽的自然景色。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "钱塘江",
                    latitude:30.273585,
                    longitude: 120.24755900000002,
                    description: "钱塘江闻名于大潮，是浙江省的母亲河。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "余杭塘河",
                    latitude: 30.2984003075872,
                    longitude: 120.12934360834265,
                    description: "余杭塘河是杭州市的历史性水利工程之一。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "建设河",
                    latitude: 30.5191,
                    longitude: 120.3612,
                    description: "建设河是浙江省杭州市的主要水流之一。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "南苕溪",
                    latitude: 30.2300,
                    longitude: 120.1145,
                    description: "南苕溪是钱塘江的支流之一，流经杭州市。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                },
                {
                    name: "永兴河",
                    latitude: 29.7442,
                    longitude: 119.5806,
                    description: "永兴河流经浙江桐庐，是当地重要的水源。",
                    imageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.6yx-XAiEct9ut3qcmiN98QHaFj?rs=1&pid=ImgDetMain'
                }
            ]
        };
    },
    methods: {
        searchClick() {
            var map = new BMapGL.Map("container");
            var localcity = new BMapGL.LocalCity();

            localcity.get(e => {
                var point = new BMapGL.Point(e.center.lng, e.center.lat);
                map.centerAndZoom(point, 13);

                var options = {
                    onSearchComplete: function (results) {
                        // 判断状态是否正确
                        if (results.getStatus() == BMAP_STATUS_SUCCESS) {
                            var s = [];
                            var markers = [];

                            for (var i = 0; i < results.getCurrentNumPois(); i++) {
                                var poi = results.getPoi(i);
                                var title = poi.title;
                                var address = poi.address;
                                var lng = poi.point.lng;
                                var lat = poi.point.lat;

                                markers.push({
                                    title: title,
                                    address: address,
                                    lng: lng,
                                    lat: lat
                                });

                                s.push(`${title}, ${address}`);
                            }

                            document.getElementById("r-result").innerHTML = s.join("<br/>");

                            markers.forEach(markerInfo => {
                                var markerPoint = new BMapGL.Point(markerInfo.lng, markerInfo.lat);
                                var marker = new BMapGL.Marker(markerPoint);
                                map.addOverlay(marker);

                                var sContent = `<h4 style='margin:0 0 5px 0;'>${markerInfo.title}</h4>
                                                <p>地址: ${markerInfo.address}</p>
                                                <p>经度: ${markerInfo.lng}</p>
                                                <p>纬度: ${markerInfo.lat}</p>`;
                                var infoWindow = new BMapGL.InfoWindow(sContent);

                                marker.addEventListener('click', function () {
                                    this.openInfoWindow(infoWindow);
                                });
                            });
                        }
                    }
                };

                var local = new BMapGL.LocalSearch(map, options);
                local.search(this.searchInfo);
            });
        }
    },
    mounted() {
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(120.121288, 30.222724);
        map.centerAndZoom(point, 13);

        var scaleCtrl = new BMapGL.ScaleControl();
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();
        map.addControl(cityCtrl);
        map.enableScrollWheelZoom(true);

        const location = new BMapGL.LocationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMapGL.Size(10, 80)
        });
        map.addControl(location);

        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);

        this.rivers.forEach(river => {
            var riverPoint = new BMapGL.Point(river.longitude, river.latitude);
            var riverMarker = new BMapGL.Marker(riverPoint);
            map.addOverlay(riverMarker);

            var content = `
                <h4 style='margin:0 0 5px 0;'>${river.name}</h4>
                <p>${river.description}</p>
                <img style='float:right;margin:0 4px 22px;width:100%;' src='${river.imageUrl}' width='139' height='104'/>
            `;
            var infoWindow = new BMapGL.InfoWindow(content);

            riverMarker.addEventListener('click', function () {
                this.openInfoWindow(infoWindow);
            });
        });
    }
};
</script>

<style scoped lang="scss">
#container {
    height: 500px;
    width: 100%;
}
</style>
